<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>古典音乐</title>
	<link href="../css1.css">
	<style type="text/css">
		.header{
			width:1000px;
			height:120px;
			background-color:white;
			margin:0 auto;
		}
		.content{
			width:1000px;
			height:1800px;
			/*background-color:aliceblue;*/
			margin:0 auto;
		}
		.left{
			width:380px;
			height:300px;
			float:left;
			margin-left:100px;
		}
		.center{
			width:200px;
			height:1800px;
			background-color:aqua;
            margin:0 auto;
		}
		.right{
			width:380px;
			height:300px;
			float:right;
			margin-right:100px;
		}
		.blank{
			width:180px;
			height:300px;
			background-color:white;
			float:left;
		}
		.touming{
			opacity:0.5;
		}
		.back{
			height:1800px;
			width:1000px;
			background-image:url("../image/最新时间轴.png");
			margin:0 auto;
			background-position:center;
			background-repeat:no-repeat;
		}
		@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
#wrapper {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
} 
	</style>
	<link href="../../20180909/03/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
	<br>
  <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="+5"><strong>古典音乐</strong></font></p>
</div>
<div class="back" >
<div class="content">
<a href="geligaoli.html" target="_blank">	
<div class="left";
	 style=background-image:url("../image/格里高利圣咏.png");
	 id="wrapper">
     <br><br><br><br><br><br><br><br><br><br>
	  <p style="  font-size: 36px; color: #FFFFFF;">格里高利时期</p>
</div>
</a>	
<div class="right">
	<br><br><br><br><br><br><br><br><br><br><br>
	<p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+3">1600</font></p>
</div>
	<div class="left">
	<br>
	<p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<font size="+3">1450</font></p>
	<p></p>
</div>
	
	<div class="right" style=background-image:url("../image/文艺复兴时期.jpg") 
		 title="文艺复兴时期" id="wrapper">
		 <br><br><br><br><br><br><br><br><br><br>
	<p style="font-size: 36px; color: #FFFFFF;">文艺复兴时期</p>
</div>
	<a href="baluoke.html" target="_blank">
	<div class="left" style=background:url("../image/巴洛克时期.png") id="wrapper">
	<br><br><br><br><br><br><br><br><br><br>
	  <p style="  font-size: 36px; color: #FFFFFF;">巴洛克时期</p>
</div>
	</a>
	<div class="right">&nbsp;</div>
	<div class="left">
	  <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+3">1750</font></p>
	</div>
	
  <div class="right" style=background:url("../image/古典主义时期音乐.png")
		 title="古典主义时期" id="wrapper">
	<br><br><br><br><br><br><br><br><br><br>
	  <p style="  font-size: 36px; color: #FFFFFF;">古典主义时期</p>
		
</div>
	<a href="langman.html" target="_blank">
	<div class="left" style=background:url("../image/浪漫主义.jpg") id="wrapper">
	<br><br><br><br><br><br><br><br><br><br>
	  <p style="  font-size: 36px; color: #FFFFFF;">浪漫主义时期</p>
</div>
	</a>	
<div class="right">
  <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+3">1820</font></p>
  <p><br>
  </p>
  <p><br><br><br>
  </p>
  <p><br>
  </p>
  <p>
  </p>
  <p><font size="+3"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1900</font></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+3"></font></p>
</div>
<div class="left">&nbsp;</div>
	<a href="ershishiji.html" target="_blank">
<div class="right" style=background:url("../image/二十世纪.jpg") id="wrapper">
	<br><br><br><br><br><br><br><br><br><br>
	  <p style="  font-size: 36px; color: #FFFFFF;">二十世纪音乐</p>
</div>
	</a>
</div>
	</div>
	<center><div><a href=http://zhaicongrong.gitee.io/dajiji target="_blank"><span><font size="+3">返回首页</font></span></a></div></center>
</body>
</html>
